<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        width: '100%',
        height: statusBarHeight + 'px',
        background: 'white',
        position: 'fixed',
        top: 0,
        zIndex: 100,
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">创建微创</view>
      <view class="head_right"> </view>
    </view>

    <view :style="{ marginTop: statusBarHeight + 'px' }">
      <u--form
        labelPosition="left"
        labelWidth="200rpx"
        :model="model1"
        ref="uForm"
      >
        <u-form-item
          label="微创类型"
          prop="userInfo.group"
          ref="item1"
          borderBottom
        >
          <view class="picker_fill" @click="show = true">
            <u-icon name="arrow-down-fill"></u-icon>
            {{ model1.userInfo.type }}
          </view>
        </u-form-item>
        <!-- 灵感塔 -->
        <u-form-item
          label="灵感标题"
          ref="item2"
          borderBottom
          v-if="model1.userInfo.type == '灵感塔'"
        >
          <view>
            <u--input
              v-model="model1.userInfo.title"
              border="none"
              :customStyle="{
                'border-radio': '16rpx',
                'margin-top': '16rpx',
                'margin-left': '302rpx',
              }"
              placeholder="请输入标题"
            ></u--input>
          </view>
        </u-form-item>

        <!-- 诗心园 -->
        <u-form-item
          label="诗歌标题"
          ref="item2"
          borderBottom
          v-if="model1.userInfo.type == '诗心园'"
        >
          <view>
            <u--input
              v-model="model1.userInfo.title"
              border="none"
              :customStyle="{
                'border-radio': '16rpx',
                'margin-top': '16rpx',
                'margin-left': '302rpx',
              }"
              placeholder="请输入标题"
            ></u--input>
          </view>
        </u-form-item>
        <!-- 文心岛 -->
        <view class="island_type" v-if="model1.userInfo.type == '文心岛'">
          <view
            class="island_type_item"
            :class="islandType == 0 ? 'island_type_action' : ''"
            @click="islandType = 0"
          >
            新建文心岛
          </view>
          <view
            class="island_type_item"
            :class="islandType == 1 ? 'island_type_action' : ''"
            @click="islandType = 1"
          >
            续写文心岛
          </view>
        </view>
        <u-form-item
          label="文心岛标题"
          ref="item2"
          borderBottom
          v-if="model1.userInfo.type == '文心岛' && islandType == 0"
        >
          <view>
            <u--input
              v-model="model1.userInfo.name"
              border="none"
              :customStyle="{
                'border-radio': '16rpx',
                'margin-top': '16rpx',
                'margin-left': '302rpx',
              }"
              placeholder="请输入标题"
            ></u--input>
          </view>
        </u-form-item>
        <u-form-item
          label="文心岛"
          ref="item1"
          borderBottom
          v-if="model1.userInfo.type == '文心岛' && islandType == 1"
        >
          <view class="picker_fill" @click="show2 = true">
            {{ model1.userInfo.continuous }}
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
        </u-form-item>

        <u-form-item
          label="文心岛章节标题"
          ref="item2"
          borderBottom
          v-if="model1.userInfo.type == '文心岛'"
        >
          <view>
            <u--input
              v-model="model1.userInfo.title"
              border="none"
              :customStyle="{
                'border-radio': '16rpx',
                'margin-top': '16rpx',
                'margin-left': '302rpx',
              }"
              placeholder="请输入标题"
            ></u--input>
          </view>
        </u-form-item>
        <!-- 游记 -->
        <u-form-item
          label="游记标题"
          ref="item2"
          borderBottom
          v-if="model1.userInfo.type == '游记'"
        >
          <view>
            <u--input
              v-model="model1.userInfo.title"
              border="none"
              :customStyle="{
                'border-radio': '16rpx',
                'margin-top': '16rpx',
                'margin-left': '302rpx',
              }"
              placeholder="请输入标题"
            ></u--input>
          </view>
        </u-form-item>

        <u-form-item
          label="关联地区"
          ref="item2"
          borderBottom
          v-if="model1.userInfo.type == '游记' && !guanlianid"
        >
          <view>
            
            <view class="picker_fill" @click="youliShow = true">
              <u-icon name="arrow-down-fill"></u-icon>
              {{ model1.userInfo.guanlianText }}
            </view>
          </view>
        </u-form-item>

        <u-form-item labelPosition="top" label="" ref="item2" borderBottom>
          <u--textarea
            border="none"
            style="margin-top: 16rpx"
            :count="true"
            :maxlength="maxlength"
            v-model="model1.userInfo.content"
            :placeholder="textareaPlace"
            confirmType="return"
          ></u--textarea>
        </u-form-item>
        <view class="props">
          <view class="props_up">
            <u-upload
              :use-before-read="true"
              :fileList="fileList1"
              @afterRead="afterRead($event, 1)"
              @beforeRead="beforeRead"
              name="1"
              :previewImage="false"
            >
              <view class="up">
                <image
                  style="width: 48rpx; height: 48rpx"
                  src="@/static/images/icon_cjtl_shangchuantupianhuoshipin.png"
                  mode=""
                ></image>
                <view class="up_text"> 上传图片 </view>
              </view>
            </u-upload>
          </view>

          <view class="props_up">
            <u-upload
              :use-before-read="true"
              :fileList="fileList2"
              @afterRead="afterRead($event, 2)"
              @beforeRead="beforeRead"
              name="1"
              :previewImage="false"
              accept="video"
            >
              <view class="up">
                <image
                  style="width: 48rpx; height: 48rpx"
                  src="@/static/images/icon_cjtl_shangchuantupianhuoshipin.png"
                  mode=""
                ></image>
                <view class="up_text"> 上传视频 </view>
              </view>
            </u-upload>
          </view>

          <view class="props_up">
            <view class="up" @click="toAudio">
              <image
                style="width: 48rpx; height: 48rpx"
                src="@/static/images/icon_cjtl_shangchuanyinpin.png"
                mode=""
              ></image>
              <view class="up_text"> 上传音频 </view>
            </view>
          </view>
        </view>
        <!-- 音频 -->
        <view
          v-if="src"
          style="
            margin-top: 40rpx;
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
          "
        >
          <com-audio
            :src="src"
            @deleteAudio="deleteAudio"
            :showDelBtn="true"
          ></com-audio>
        </view>
        <!-- 上传文件预览区域 -->
        <view class="preview_box" v-if="fileList && fileList.length > 0">
          <view
            class="preview_box_item"
            v-for="(imgItem, ind) in fileList"
            :key="ind"
          >
            <!-- 展示图 -->
            <image
              :src="imgItem.url"
              class="file_image"
              v-if="imgItem.type == 'image'"
            ></image>
            <!-- 展示视频 -->
            <view
              v-if="imgItem.type == 'video'"
              @click="playVideo(imgItem.url)"
            >
              <image :src="imgItem.url_img" class="file_image"></image>
              <view class="video_cover">
                <view class="video_cover_play">
                  <image src="@/static/images/icon_dtym_bofang.png"></image>
                </view>
              </view>
            </view>

            <!-- 删除图标 -->
            <view class="del_image_box">
              <image
                src="@/static/images/my/icon_sczp_shanchu.png"
                class="del_image"
                @click.stop="deletePic(ind)"
              ></image>
            </view>
          </view>
        </view>

        <u-form-item label="权限" ref="item1" borderBottom>
          <view class="picker_fill" @click="show1 = true">
            <u-icon name="arrow-down-fill"></u-icon>
            {{ model1.userInfo.limits }}
          </view>
        </u-form-item>

        <u-form-item label="等级限制" ref="item2" borderBottom v-if="showGrade">
          <view class="picker_fill" @click="show3 = true">
            <u-icon name="arrow-down-fill"></u-icon>
            {{ model1.userInfo.grade_auth_text }}
          </view>
        </u-form-item>

        <view class="fill_text">
          <view class=""> 1、视频文件过大时压缩时间较长，请耐心等待 </view>
          <view class=""> 2、若出现黑屏，请清理手机内存 </view>
          <view class="">
            3、建议您调整手机拍摄清晰度选择720p及以下的规格进行拍摄
          </view>
        </view>

        <view :style="{ height: '200rpx' }"></view>

        <view class="btn">
          <view class="box_btn" @click="subFn"> 发布 </view>
        </view>
      </u--form>
    </view>

    <select-type
      :show="show"
      :list="typeList"
      @colse="typeColse"
      @confirm="typeConfirm"
      :defaultValue="type ? true : false"
      :defaultIndex="defaultIndex"
      title="微创类型"
    ></select-type>
    <select-type
      :show="show1"
      :list="limitsList"
      @colse="limitsColse"
      @confirm="limitsConfirm"
      :defaultValue="true"
      title="权限"
    ></select-type>
    <select-type
      :show="show3"
      :list="gradeList"
      @colse="gradeColse"
      @confirm="gradeConfirm"
      :defaultValue="true"
      title="等级限制"
    ></select-type>
    <select-type
      :show="show2"
      :list="continuousList"
      @colse="continuousColse"
      @confirm="continuousConfirm"
      title="章节"
    ></select-type>
    <!-- 游历列表 -->
    <u-picker :show="youliShow" :columns="[youliList]" keyName="name" @cancel="youliShow = false" @confirm="selectYou"></u-picker>

    <floatingBall></floatingBall>
  </view>
</template>

<script>
import selectType from "@/components/selectType.vue";
import config from "@/config"; // 配置文件
import storage from "@/common/storage.js"; // 缓存封装
import comAudio from "@/pages/components/audio.vue";
export default {
  components: {
    selectType,
    comAudio,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      typeList: [
        {
          name: "飞离洞",
          value: "1",
        },
        {
          name: "灵感塔",
          value: "2",
        },
        {
          name: "诗心园",
          value: "3",
        },
        {
          name: "文心岛",
          value: "4",
        },
        {
          name: "游记",
          value: "6",
        },
      ],
      limitsList: [
        {
          name: "所有人",
          value: "0",
        },
        {
          name: "粉丝",
          value: "1",
        },
        {
          name: "自己",
          value: "2",
        },
      ],
      continuousList: [
        {
          name: "章节1",
          value: 1,
        },
        {
          name: "章节2",
          value: 2,
        },
      ],
      model1: {
        userInfo: {
          type: "飞离洞",
          content: "",
          limits: "所有人",
          continuous: "请选择关联的文心岛",
          title: "",
          name: "",
          guanlian: 0,
          guanlianText: '',
          status: 0,
          grade_auth: 0,
          grade_auth_text: "无限制",
        },
      },

      show: false,
      show1: false,
      show2: false,
      show3: false,
      youliShow:false,
      fileList: [],
      fileList1: [],
      fileList2: [],
      youliList:[],
      islandType: 0,
      file_id: [], // 图片/视频文件id集合
      audio_id: "", // 音频id
      createType: 1, // 当前表单选择的创建类型 1飞离洞 2灵感塔 3诗心园 4文心岛 6游记
      is_video: 0, // 游记 文件中是否有视频 0没有 1有 有视频放到逍遥游(其他类型直接传0)
      videoContext: "",
      upVideo: true, // 是否允许继续上传
      src: "", //音频
      textareaPlace: "以离开地球的心情,记下生命中值得留下,投入此洞...",
      type: "",
      defaultIndex: 0,
      showGrade: false,
      gradeList: [], // 等级限制列表
      maxlength: 30,
      guanlianid:0,
    };
  },
  onLoad(options) {
    
    this.getWenList();
    this.getUserInfo();
    this.getGradeList();
    if (options.guanlianid) {
      // 判断是从个人游历进来的
      this.guanlianid = options.guanlianid
      this.model1.userInfo.guanlian = options.guanlianid;
    } else {
      // 从微创进来的
      this.getYouLiList()
    }
    this.type = options.type;
    if (this.type == 1) {
      // 飞离洞
      this.model1.userInfo.type = "飞离洞";
      this.createType = 1;
      this.defaultIndex = 0;
      this.maxlength = 30;
    } else if (this.type == 2) {
      // 灵感塔
      this.model1.userInfo.type = "灵感塔";
      this.createType = 2;
      this.defaultIndex = 1;
      this.maxlength = 500;
    } else if (this.type == 3) {
      // 诗心园
      this.model1.userInfo.type = "诗心园";
      this.createType = 3;
      this.defaultIndex = 2;
      this.maxlength = 1000;
    } else if (this.type == 4) {
      // 文心岛
      this.model1.userInfo.type = "文心岛";
      this.createType = 4;
      this.defaultIndex = 3;
      this.maxlength = 4000;
    } else if (this.type == 6) {
      // 游历
      this.model1.userInfo.type = "游记";
      this.createType = 6;
      this.defaultIndex = 4;
      this.maxlength = 1500;
    }
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
    // this.createWei()
  },
  methods: {

    // 地区选择
    selectYou(e){
      console.log(e)
      this.model1.userInfo.guanlian = e.value[0].id
      this.model1.userInfo.guanlianText = e.value[0].name
      this.youliShow = false
    },


    // 获取山海信息
    getYouLiList(){
      this.$http
        .usergongnengYouLi({  })
        .then((res) => {
          console.log(res,'游历信息')
          this.youliList = res.data.list
          this.model1.userInfo.guanlian = res.data.list[0].id
          this.model1.userInfo.guanlianText = res.data.list[0].name
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 获取个人信息
    getUserInfo() {
      this.$http
        .userInfo({ hideLoading: true })
        .then((res) => {
          // this.continuousList = res.data.list;
          // console.log(this.continuousList, "文心岛续写选项");
          // console.log(res, "个人信息");
          if (res.data.userInfo.is_teacher || res.data.userInfo.is_senators) {
            this.showGrade = true;
          } else {
            this.showGrade = false;
          }
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 获取等级限制列表
    getGradeList() {
      this.$http
        .userLevelList({ hideLoading: true })
        .then((res) => {
          // console.log(res, "等级限制列表");
          let arr = JSON.parse(JSON.stringify(res.data.list));
          arr.unshift({
            level_id: 0,
            level_name: "无限制",
          });
          this.gradeList = arr;
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },

    // 文心岛续写选项
    getWenList() {
      this.$http
        .weichuangGetwenxindaoname({})
        .then((res) => {
          this.continuousList = res.data.list;
          // console.log(this.continuousList, "文心岛续写选项");
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    typeColse() {
      this.show = false;
    },
    limitsColse() {
      this.show1 = false;
    },
    gradeColse() {
      this.show3 = false;
    },
    gradeConfirm(e) {
      // console.log(e, "当前选项");
      this.model1.userInfo.grade_auth = e.level_id;
      this.model1.userInfo.grade_auth_text = e.level_name;
      this.show3 = false;
    },
    typeConfirm(e) {
      console.log(e);
      this.model1.userInfo.type = e.name;
      this.createType = e.value;
      if (e.value == 1) {
        this.textareaPlace =
          "以离开地球的心情,记下生命中值得留下,投入此洞......";
        this.maxlength = 30;
      } else if (e.value == 2) {
        this.textareaPlace = "记录你刹那的火花......";
        this.maxlength = 500;
      } else if (e.value == 3) {
        this.textareaPlace = "展现你的满腹诗书......";
        this.maxlength = 1000;
      } else if (e.value == 4) {
        this.textareaPlace =
          "将你的故事记录在此，写下你天马行空的思绪和想法......";
        this.maxlength = 4000;
      } else if (e.value == 6) {
        this.textareaPlace = "记录路上最美好的风景......";
        this.maxlength = 1500;
      }
      this.show = false;
    },
    limitsConfirm(e) {
      console.log(e);
      this.model1.userInfo.limits = e.name;
      this.model1.userInfo.status = e.value;
      this.show1 = false;
    },
    continuousColse(e) {
      this.show2 = false;
    },
    continuousConfirm(e) {
      this.model1.userInfo.continuous = e.name;
      this.model1.userInfo.name = e.name;
      this.show2 = false;
    },
    toAudio() {
      uni.navigateTo({
        url: "/pages/components/recording_audio",
      });
    },
    // 播放视频
    playVideo(url) {
      // console.log(1111111111111);
      uni.navigateTo({
        url: `/components/preview?type=false&vimg=${url}`,
      });
      // e.preventDefault(); // 阻止按钮的默认点击行为
      // console.log("点击事件被阻止");
    },
    // 删除音频
    deleteAudio() {
      console.log("删除啦");
      this.audio_id = "";
      this.src = "";
    },
    // 删除图片
    deletePic(index) {
      // this[`fileList${event.name}`].splice(event.index, 1);
      this.fileList.splice(index, 1);
      this.file_id.splice(index, 1);
      console.log(this.file_id, "id数组");
      console.log(this.fileList, "展示数组");
    },
    // 新增图片/视频之前的操作
    beforeRead() {
      if (this.file_id.length < 9) {
        this.upVideo = true;
      } else {
        this.upVideo = false;
      }
      console.log("上传之前");
    },

    // 新增图片/视频
    async afterRead(event, index) {
      if (!this.upVideo) {
        return uni.$u.toast("上传数量已达上限");
      }
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        let result;
        if (index == 1) {
          // 图片
          result = await this.uploadFilePromise(lists[i].url);
        } else {
          // 视频
          result = await this.uploadFilePromiseVideo(lists[i].url);
        }

        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
      console.log("上传完安");
    },
    // 上传图片
    uploadFilePromise(url) {
      let that = this;
      let token = storage.get("token");
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.uni_app_web_api_url + "/api/upload/image", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          header: {
            "Access-Token": token,
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            that.file_id.push(data.data.fileInfo.file_id);
            that.fileList.push({
              url: data.data.fileInfo.external_url,
              type: "image",
            });
            console.log(that.file_id, "id数组");
            console.log(that.fileList, "展示数组");
            resolve(res.data.data);
          },
        });
      });
    },

    // 上传视频
    uploadFilePromiseVideo(url) {
      let that = this;
      let token = storage.get("token");
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: config.uni_app_web_api_url + "/api/upload/video", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          header: {
            "Access-Token": token,
          },
          success: (res) => {
            const data = JSON.parse(res.data);
            that.file_id.push(data.data.fileInfo.file_id);
            that.fileList.push({
              url: data.data.fileInfo.external_url,
              type: "video",
              url_img: data.data.fileInfo.url_img,
            });
            console.log(data, "res");
            console.log(that.file_id, "id数组");
            console.log(that.fileList, "展示数组");
            resolve(res.data.data);
          },
        });
      });
    },

    // 提交
    subFn() {
      // 判断有没有音频
      console.log("audio", this.audio_id);
      if (this.audio_id != "") {
        this.file_id.push(this.audio_id);
      }
      if (this.createType == 6) {
        // 如果是游记  判断是否有视频  改变is_video状态  0没有 1有

        let isHave = false;
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].type == "video") {
            isHave = true;
          }
        }
        if (isHave) {
          this.is_video = 1;
        } else {
          this.is_video = 0;
        }
      }
      if (this.createType == 0) {
        return uni.$u.toast("请选择微创类型");
      }
      // 文心岛标题
      if (this.createType == 4) {
        if (this.islandType == 0) {
          if (this.model1.userInfo.name == "") {
            return uni.$u.toast("请输入文心岛标题");
          }
        } else {
        }
      }

      // 除了飞离洞其他都需要输入标题
      if (this.createType != 1) {
        if (this.model1.userInfo.title == "") {
          return uni.$u.toast("请输入标题");
        }
      }
      // 内容
      if (this.model1.userInfo.content == "") {
        return uni.$u.toast("请输入内容");
      }
      // 权限
      if (this.model1.userInfo.status === "") {
        return uni.$u.toast("请选择权限");
      }

      this.createWei();
    },
    createWei() {
      console.log(this.model1.userInfo.content, "富文本内容");
      this.$http
        .weichuangCreate({
          type: this.createType,
          content: this.model1.userInfo.content.replace(/\n/g, "<br/>"),
          title: this.model1.userInfo.title,
          file_id: this.file_id.join(","),
          status: this.model1.userInfo.status,
          is_video: this.is_video,
          name: this.model1.userInfo.name,
          guanlian: this.model1.userInfo.guanlian,
          grade_auth: this.model1.userInfo.grade_auth,
        })
        .then((res) => {
          console.log(res, "创建微创");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        })
        .catch((error) => {
          uni.$u.toast(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    display: flex;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.picker_fill {
  width: 490rpx !important;
  display: flex;
  flex-direction: row-reverse;
  .u-icon {
    margin-left: 20rpx;
    position: relative;
    top: 3rpx;
  }
  // margin-left: 420rpx;
}

.fill_text {
  width: 100%;
  margin-top: 32rpx;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #888888;
  line-height: 40rpx;
  margin-bottom: 200rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
}
.props {
  width: 100%;
  margin-top: 28rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 32rpx;
  display: flex;
  .props_text {
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #adadad;
  }

  .props_up {
    margin-top: 24rpx;
    .up {
      width: 156rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .up_text {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #888888;
      margin-top: 12rpx;
    }
  }
}

.preview_box {
  margin-top: 40rpx;
  padding: 0 40rpx;
  .preview_box_item {
    width: 222rpx;
    height: 222rpx;
    display: inline-block;
    margin-right: 5rpx;
    margin-bottom: 10rpx;
    position: relative;
    .file_image {
      width: 222rpx;
      height: 222rpx;
      /deep/.uni-video-cover-duration {
        display: none;
      }
      /deep/ .uni-video-cover {
        display: none;
      }
    }
    .video_cover {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(1, 1, 1, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      .video_cover_play {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
    .del_image_box {
      z-index: 100;
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(68, 68, 68, 0.3);
      .del_image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .preview_box_item:nth-child(3n) {
    margin-right: 0;
  }
}

.btn {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 80rpx;
  left: 0;
  .box_btn {
    width: 100%;
    height: 96rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}
.island_type {
  display: flex;
  padding: 40rpx 40rpx;
  box-sizing: border-box;
  .island_type_item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    height: 56rpx;
    background: #f7f8fa;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    margin-right: 16rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #888888;
  }
  .island_type_action {
    background: #55b877 !important;
    color: #ffffff !important;
  }
}
/deep/.u-form-item__body {
  padding: 20rpx 30rpx;
}
/deep/.u-form-item__body__right__message {
  display: flex !important;
  flex-direction: row-reverse !important;
}
</style>